<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>收藏歌曲</el-breadcrumb-item>
      <el-breadcrumb-item>用户收藏</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="echarts" ref="container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import testAx from '@/utils/testApiServer.js'
export default {
  name: "UserCollect",
  methods: {
    async getNodes() {
      const {data: nodes} = await testAx.get('/topcollect')
      const {data: link} = await testAx.get('/tcArrow')
      this.draw(nodes, link)
    },
    draw(nodes, link) {
      const options = {
      title: {
        text: "前四小伙伴收藏歌曲的关系图",
        subtext: '共同收藏两次以上',
        textStyle:{
          color:'rgb(0,0,0,0.5)',
          fontFamily:'Arial',
          fontSize:'20',
        },
        left:'center',
        padding: 10
      },
      animationDurationUpdate: 1500,
      animationEasingUpdate: "quinticInOut",
      series: [
        {
          type: "graph",
          layout: "none",
          symbol: 'circle',
          symbolSize:50,
          roam: true,
          label: {
            show: true,
            fontSize: 14,
            align: 'center',
            rotate: 20
          },
          edgeSymbol: ["none", "arrow"],
          edgeSymbolSize: 12,
          data: nodes,
          // links: [],
          links: link,
          itemStyle:{
            color:'#64caff',
          },
          lineStyle: {
            opacity: 1,
            width: 2,
            curveness: 0,
          },
        },
      ],
    };
    var myCharts = echarts.init(this.$refs.container);
    myCharts.setOption(options);
    }
  },
  mounted() {
    this.getNodes()
  },
};
</script>

<style lang="less" scoped>
.echarts {
  width: 1000px;
  height: 850px;
  margin: 0 auto;
  padding-right: 5%;
}
</style>